<template>
  <div class="search-main">
    <div class="main" v-if="searchShow">
      <div class="search">
        <div class="container">
          <img :src="icon.filterIcon" class="filter" @click="filterClick">
          <el-input v-model="content" :placeholder="placeholder" :disabled="ifDisabled" class="input-container" />
          <!-- <img :src="icon.mirrorIcon" class="filter"> -->
          <img :src="icon.closeIcon" class="filter cpointer" title="清空输入内容" @click="content = ''">
        </div>
      </div>
      <el-scrollbar height="5rem" class="type" v-if="filterShow">
        <div v-for="item in layerData.layer" :key="item.id">
          <div v-if="item.list && item.list.length > 0" class="item-parent">
            <div class="item_title" @click="item.showItem = !item.showItem">
              <div class="item-label" />
              <img :src="icon.caretTopIcon" :class="[item.showItem ? 'item-caret-top' : 'item-caret-bottom']">
              <div class="item-main">
                <div class="name" v-text="item.name" />
                <div class="count" v-text="item.list.length + `项图层`" />
              </div>
            </div>

            <el-collapse-transition>
              <div v-if="item.showItem">
                <el-scrollbar height="1.65rem">
                  <div class="sub-item" v-for="subItem in item.list" :key="subItem.id">
                    <div class="sub-item-label" />
                    <div class="sub-item-name" v-text="subItem.name" />
                    <div v-if="subItem.visible" class="normal" :class="subItem.checkState ? 'checked' : 'unChecked'" @click="itemChecked(subItem)">
                      <el-icon v-if="subItem.checkState"><Select /></el-icon>
                    </div>
                  </div>
                </el-scrollbar>
              </div>

            </el-collapse-transition>
          </div>
        </div>
      </el-scrollbar>
      <el-scrollbar class="result" v-if="associateShow">
        <div
          class="associate"
          style="cursor:pointer"
          v-for="associateItem, index in resultAssociation"
          :key="index"
          @click="handleResult(associateItem)"
          :class="associateItem.sselected ? 'associate-select' : ''"
        >
          <img class="associate-icon" :src="associateItem.icon === '' ? icon.filterIcon : associateItem.icon ">
          <div class="associate-text" v-html="associateItem.text" />
        </div>
      </el-scrollbar>
      <div class="result" v-if="showNoResult">
        <div class="associate">
          <img class="noresult-icon" :src="noresult">
          <div class="associate-text" v-text="'未查询到相关信息'" />
        </div>
      </div>
    </div>
    <img src="../../assets/dialog/search.png" class="search-icon" @click="handleSearchDialog">
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, watch, computed } from 'vue'
import filterIcon from '../../assets/dialog/search_filter.png'
import mirrorIcon from '../../assets/dialog/search_mirror.png'
import closeIcon from '../../assets/dialog/search_close.png'
import caretTopIcon from '../../assets/dialog/gis_caret_top.png'
import uncheckIcon from '../../assets/dialog/search_uncheck.png'
import noresult from '../../assets/dialog/noresult.png'

import { ElInput, ElCollapseTransition } from 'element-plus'
import { DealData } from '../../utils/utils'

const emit = defineEmits(['callback', 'searchDialogClick', 'searchContent'])
const showNoResult = ref(false) // 是显示未查询到结果
const searchMenu:any = ref('')
// 点击搜索框弹出按钮
const handleSearchDialog = () => {
  searchShow.value = !searchShow.value
  emit('searchDialogClick')
}
// 关闭窗口
const closeSearchDialog = () => {
  searchShow.value = false
}
const props = defineProps({
  layerListData: {
    type: Array,
    default: () => []
  },
  layerSearchList: {
    type: Array,
    default: () => []
  },
  resultList: {
    type: Array,
    default: () => []
  }
})
const layerListData = computed(() => props.layerListData)
watch(layerListData, () => {
  getMapLayerData()
})
const layerSearchList = computed(() => props.layerSearchList)

const icon = reactive({
  filterIcon: filterIcon,
  mirrorIcon: mirrorIcon,
  closeIcon: closeIcon,
  caretTopIcon: caretTopIcon,
  uncheckIcon: uncheckIcon,
  noresult: noresult
})
const searchShow = ref(false)
const content = ref('')
const placeholder = ref('请先选择查询的内容类型')
const filterShow = ref(true)

const resultAssociation = ref([] as any)
const associateShow = ref(false) // 查询结果显示dom
const ifDisabled = ref(true) // 输入框是否禁用
let checkedItem: any
// 查询返回列表
const resultList = computed(() => props.resultList)
watch(resultList, () => {
  resultAssociation.value = []
  if (resultList.value && resultList.value.length > 0) {
    resultList.value.forEach((item:any) => {
      if (item.text && content.value) {
        const text = String(item.text)
        const replaceStr = text.replaceAll(content.value, `<span style='color:red;'>${content.value}</span>`)
        item.text = replaceStr
      }
    })
  }
  resultAssociation.value.push(...resultList.value)
  associateShow.value = resultAssociation.value.length > 0
  filterShow.value = !associateShow.value
  if (resultAssociation.value.length === 0) {
    showNoResult.value = true
    filterShow.value = false
  } else {
    showNoResult.value = false
  }
})
watch(content, () => {
  if (content.value === '') {
    resultAssociation.value = []
    associateShow.value = resultAssociation.value.length > 0
    filterShow.value = !associateShow.value
    showNoResult.value = false
  } else {
    emit('searchContent', searchMenu.value, content) // 输入内容传递出去
  }
})
// 图层数据
const layerData = reactive({
  layer: [] as any
})
const filterClick = () => {
  filterShow.value = !filterShow.value
  associateShow.value = !filterShow.value
}
// 选中item 单选
const itemChecked = (item: any) => {
  if (checkedItem != null) {
    checkedItem.checkState = !checkedItem.checkState
  }
  checkedItem = item
  item.checkState = !item.checkState
  if (layerSearchList.value && layerSearchList.value.length > 0) {
    layerSearchList.value.forEach((litem:any) => {
      if (litem.element_name === item.elementName) {
        searchMenu.value = litem
      }
    })
  }
  placeholder.value = searchMenu.value.content_description || '请输入' + item.name + '名称'
  ifDisabled.value = false
}
// 处理搜索结果
const handleResult = (item: any) => {
  resultAssociation.value.forEach((element:any) => {
    element.sselected = false
  })
  item.sselected = true
  emit('callback', item.feature)
}
// 获取图层数据
const getMapLayerData = () => {
  layerData.layer = []
  const res = layerListData.value
  const dataList:any = DealData(res, (item:any) => {
    item.name = item.elementName
    item.hidden = false
    item.showItem = false
    item.checkState = false
    item.visible = ('visible' in item) ? item.visible : (!!Number(item.isShow) || false)
  }, 'pid', 'elementId')
  dataList.forEach((item:any) => {
    if (item.children) {
      item.list = item.children
    }
  })
  layerData.layer.push(...dataList)
}

defineExpose({ closeSearchDialog })
</script>
<style lang="scss" scoped>
.search-main{
  display: flex;
  pointer-events: none;
  .search-icon{
    pointer-events: all;
    width: 36px;
    height: 36px;
    cursor:pointer;
  }
}
.main {
  pointer-events: all;
  display: flex;
  flex-direction: column;
  .cpointer{
    cursor: pointer;
  }
  .search {
    height: 36px;
    border-radius: 8px;
    background: #242D3A;
    box-sizing: border-box;
    border: 1px solid rgba(0, 170, 255, 0.2);
    padding-right: 8px;

    .container {
      display: flex;
      flex-direction: row;
      align-items: center;
      user-select: none;
      .input-container{
        width: 270px;
      }
      &:deep(.el-input) {
        --el-input-bg-color: transparent;
        .el-input__wrapper {
          box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
          cursor: default;
          background-color: transparent;
          // .el-input__inner {
          //   cursor: default !important;
          // }
        }

        input::-webkit-input-placeholder {
          color: #ffffff;
          font-size: 14px;
        }

        input::-moz-input-placeholder {
          color: #ffffff;
          font-size: 14px;
        }

        input::-ms-input-placeholder {
          color: #ffffff;
          font-size: 14px;
        }
      }

      .filter {
        width: 16px;
        height: 16px;
        margin-left: 8px;
      }
    }
  }

  .type {
    display: flex;
    flex-direction: column;
    margin-top: 6px;
    margin-left: 34px;
    padding: 12px;
    box-sizing: border-box;
    background: #242D3A;
    max-height: 5rem;
    height: 100%;
    .sub-title {
      font-size: 18px;
      font-weight: 500;
      line-height: 20px;
      letter-spacing: 0px;
      color: #FFFFFF;
      overflow: hidden;
    }

    .item-parent {
      display: flex;
      flex-direction: column;
      margin-top: 8px;

      .item_title {
        cursor: pointer;
        display: flex;
        background-color: #283442;
        height: 48px;
      }

      .item-label {
        width: 6px;
        height: 100%;
        border-radius: 0px 3px 3px 0px;
        background: #E6A23C;
      }

      .item-main {
        display: flex;
        flex-direction: column;
        margin-top: 3px;

        .name {
          font-size: 12px;
          font-weight: 500;
          line-height: 21px;
          color: #FFFFFF;
        }

        .count {
          font-size: 12px;
          font-weight: normal;
          line-height: 21px;
          letter-spacing: 0px;
          color: #8291A9;
        }
      }

      .item-caret-top {
        width: 16px;
        height: 16px;
        margin-left: 28px;
        margin-top: 5px;
        transform: rotate(-180deg);
      }

      .item-caret-bottom {
        width: 16px;
        height: 16px;
        margin-left: 28px;
        margin-top: 5px;
        transform: rotate(90deg);
      }

      .normal {
        width: 16px;
        height: 16px;
        margin: auto 14px auto auto;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .checked {
        background-color: #E6A23C;
      }

      .unChecked {
        background-color: #FFFFFF;
      }

      .sub-item {
        height: 32px;
        display: flex;
        align-items: center;
        margin-top: 6px;
        margin-left: 42px;

        .sub-item-label {
          width: 3px;
          height: 100%;
          border-radius: 0px 3px 3px 0px;
          background: #E6A23C;
        }

        .sub-item-name {
          font-size: 14px;
          font-weight: 500;
          line-height: 21px;
          /* 纯白 */
          color: #FFFFFF;
          margin-left: 26px;
        }
      }
    }
  }

  .result {
    user-select: none;
    display: flex;
    flex-direction: column;
    margin-top: 6px;
    padding: 12px;
    box-sizing: border-box;
    background: #242D3A;
    max-height: 5rem;
    overflow-y: auto;
    .associate-select{
        background: #0000008c;
      }
    .associate {
      display: flex;
      flex-direction: row;
      padding: 6px;

      .associate-icon {
        width: 24px;
        height: 24px;
      }
      .noresult-icon{
        width: 20px;
        height: 18px;
      }
      .associate-text {
        font-size: 14px;
        color: #FFFFFF;
        margin-left: 10px;
      }
    }
  }
}
</style>
